<template>
  <div style="padding-bottom: 100px;">
    <template v-if="pageInfo.flag" >
      <header class="buy-svip_header flex-col-center">
        <h2 class="svip_header-title">
          {{pageInfo.sell_hader[2].subTitle}}
        </h2>
        <p class="svip_header-desc">
          {{pageInfo.sell_hader[2].title.text}}
        </p>
        <span class="svip_header-text">
          {{pageInfo.sell_hader[2].notice}}
        </span>
        <button class="svip_header-btn ellipsis">
         ￥
         <span class="price">
          {{price.new}}
         </span>
         <del class="del">
           ￥{{price.old}}
         </del>
         开通会员
        </button>
      </header>
      <section class="privilege-box">
        <p class="tag-title-p">
          <span class="tag">
            {{pageInfo.sell_1[2].tag}}
          </span>
          <span class="tag-title">
            {{pageInfo.sell_1[2].title}}
          </span>
        </p>
        <div class="flex-item-center">
          <div class="tag1-item flex-col-center" v-for="item in 4" :key="item">
            <p class="tag1-amount-box">
              ￥
              <span class="tag1-amount">
                5
              </span>
            </p>
            <span class="tag1-sub-title">
              无门槛
            </span>
          </div>
        </div>
      </section>
      <section class="privilege-box">
        <p class="tag-title-p">
          <span class="tag">
            {{pageInfo.sell_2[2].tag}}
          </span>
          <span class="tag-title">
            {{pageInfo.sell_2[2].title}}
          </span>
        </p>
        <div class="swiper">
          <mt-swipe :auto="4000">
            <mt-swipe-item v-for="(item, index) in quanList" :key="index">
              <div class="quan-box">
                <div class="nearby-quan flex-col-center" v-for="(subItem, indexs) in quanList[index]" :key="indexs">
                  <img-format class="shop-img" :src="subItem.restaurant.image_path" :size="375" />
                  <p class="shop-name ellipsis">{{subItem.restaurant.name}}</p>
                  <p class="fff">
                    <span class="quan-amount">
                      ￥
                      <strong>6</strong>
                    </span>
                    <span class="quan-desc">无门槛</span>
                  </p>
                </div>
              </div>
            </mt-swipe-item>
          </mt-swipe>
        </div>
        <p class="tag-hint">{{pageInfo.sell_2[2].tip}}</p>
      </section>
      <section class="privilege-box">
        <p class="tag-title-p">
          <span class="tag">
            {{pageInfo.sell_3[2].tag}}
          </span>
          <span class="tag-title">
            {{pageInfo.sell_3[2].title}}
          </span>
        </p>
        <span class="tag3-hint">{{pageInfo.sell_3[2].subTitle}}</span>
        <div class="flex-row-center">
          <div class="tag3-content flex-col-center" v-for="(item, index) in pageInfo.sell_3[2].content">
            <div>
              <img class="icon-svip" src="//cube.elemecdn.com/9/a9/3bf74c7fc7e8a989be429a56b7053svg.svg"/>
              <span class="jljing">
                {{item.title.highlight[0]}}
              </span>
              <span>
                {{item.title.text.replace(item.title.highlight[0], '')}}
              </span>
            </div>
            <div class="kapian">
              ￥<span class="jljing-num">{{item.amount}}</span>
              <span>{{item.name}}</span>
            </div>
          </div>
        </div>
      </section>
      <section class="privilege-box">
        <p class="tag-title-p">
          <span class="tag">
            {{pageInfo.sell_4.tag}}
          </span>
          <span class="tag-title">
            {{pageInfo.sell_4.title}}
          </span>
        </p>
        <div class="special-container flex-item-center">
          <div class="special-content" v-for="(item, index) in specialLIst.slice(0,4)">
            <div style="position: relative;">
              <img-format class="foods-img" :src="item.foods[0].image_path" :size="375" />
              <i class="sub-huiyuan">会员专享{{item.foods[0].activities[0].tips}}</i>
            </div>
            <p class="ellipsis foods-name" >{{item.foods[0].name}}</p>
            <p class="ellipsis">
              <sub class="icon-money">￥</sub>
              <span class="foods-price">
                {{item.foods[0].price.toString().split('.')[0]}}
                <i class="sub-price">.{{item.foods[0].price.toString().split('.')[1]}}</i>
              </span>
              <del class="del-price base-font-size">￥{{item.foods[0].original_price}}</del>
            </p>
          </div>
        </div>
        <p class="tag-hint">{{pageInfo.sell_4.tip}}</p>
      </section>
      <section class="privilege-box">
        <p class="tag-title-p">
          <span class="tag">
            {{pageInfo.sell_5.tag}}
          </span>
          <span class="tag-title">
            {{pageInfo.sell_5.title}}
          </span>
        </p>
        <div class="kefu-content"></div>
        <p class="kefu-hint">
          {{pageInfo.sell_5.content}}
        </p>
      </section>
      <button class="svip-btn-large ellipsis" v-if="showLargeBtn">
       ￥
       <span class="price">
        {{price.new}}
       </span>
       <del class="del">
         ￥{{price.old}}
       </del>
       开通会员
      </button>
    </template>
    <template v-else>
      <load-animate />
    </template>
  </div>
</template>

<script>
import { getMemberPageInfo, nearbyQuan, membershipPrice, specialItemsForMembers } from '@/api/elm-data'
import ImgFormat from '_c/imgFormat/ImgFormat.vue'
import LoadAnimate from '_c/loadAnimate/LoadAnimate.vue'
export default {
  name: 'buy-svip',
  data() {
    return {
      pageInfo: {
        sell_hader: [],
        sell_button: [],
        sell_1: [],
        sell_2: [],
        sell_3: [],
        sell_4: [],
        sell_5: [],
        flag: false
      },
      price: {
        old: '',
        new: ''
      },
      req: {
        userID:'',
        latitude: '',
        longitude: ''
      },
      quanList: [],
      specialLIst: undefined,
      showLargeBtn: false
    }
  },
  components: {
    ImgFormat,
    LoadAnimate
  },
  async created() {
    this.req.userID = window.sessionStorage.getItem('USER_ID')
    this.req.latitude = JSON.parse(window.sessionStorage.getItem('Geo')).latitude
    this.req.longitude = JSON.parse(window.sessionStorage.getItem('Geo')).longitude
    const price = await membershipPrice(this.req)
    const data  = await getMemberPageInfo()
    const { data: { prizes } } = await nearbyQuan(this.req)
    const {data: {query_list}} = await specialItemsForMembers(this.req)
    data.forEach(item => {
      const key = item.value.config.url.split('/').pop().replace('-', '_')
      this.pageInfo[key] = item.value.data
    })
    this.price.new = price.data.product.price
    this.price.old = price.data.product.original_price
    this.specialLIst = query_list
    this.pageInfo.flag = true
    this.quanList = this.$_.chunk(prizes, 6)
    window.addEventListener('scroll', () => {
      if(window.scrollY > 400) {
        this.showLargeBtn = true
      }else {
        this.showLargeBtn = false
      }
    })
  }
}
</script>

<style scoped lang="less">
.buy-svip_header {
  padding: 20px;
  background: url(https://cube.elemecdn.com/2/ba/a823f6fee0ea47583ed5254103ac9png.png?x-oss-process=image/quality,q_90/format,webp) no-repeat center center / 100% 100%;
  color: #f3d8a2;
}
.svip_header-title {
  font-weight: 100;
  font-size: 32px;
  margin: 10px;
}
.svip_header-desc {
  margin: 15px;
  font-size: 60px;
  font-weight: 600;
}
.svip_header-text {
  padding: 5px 15px;
  border: 2px solid #000;
  border-radius: 20px;
  color: #bda87e;
  font-size: 24px;
}

.svip_header-btn, .svip-btn-large {
  margin-top: 20px;
  padding: 20px;
  width: 70%;
  background: linear-gradient(to right, #f7e6c5, #f2d59c);
  border-radius: 50px;
  color: #4d4133;
  font-size: 30px;
}
.svip-btn-large {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 96%;
  font-size: 34px;
}

.price {
  font-size: 42px;
  font-weight: 600;
  vertical-align: sub;
}
.del {
  color: #d5b48d;
  font-size: 26px;
}
.privilege-box {
  width: 94%;
  margin: 20px auto;
  background-color: #fff;
  border-radius: 10px;
  padding: 10px 20px;
  box-sizing: border-box;
}
.tag {
  padding: 3px 4px;
  background-color: #f2d59c;
  border-radius: 5px;
  color: #5a4c36;
  font-weight: 600;
  font-size: 26px;
}
.tag-title-p {
  margin: 20px;
}
.tag-title {
  margin-left: 15px;
  font-size: 32px;
  font-weight: 600;
}
.tag1-item {
  padding: 20px;
  margin: 10px;
  flex: 1;
  background-color: #fff2da;
  position: relative;
  &::after{
    content: '';
    position: absolute;
    height: 18px;
    width: 18px;
    background-color: #fff;
    transform: rotate(45deg);
    left: -9px;
    bottom: 50px;
  }
  &::before {
    content: '';
    position: absolute;
    height: 18px;
    width: 18px;
    background-color: #fff;
    transform: rotate(45deg);
    right: -9px;
    bottom: 50px;
  }
}
.tag1-amount-box {
  margin-top: 0;
  font-size: 28px;
  color: #FD5746;
}
.tag1-amount {
  font-size: 80px;
}
.tag1-sub-title {
  color: #bc9e71;
  font-size: 24px;
}
.swiper {
  height: 580px;
}
.quan-box {
  height: 100%;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.nearby-quan {
  width: 30%;
  height: 250px;
  margin: 0 10px;
  padding-top: 10px;
  background-color: #fffaf0;
}
.shop-img {
  width: 120px;
}
.shop-name {
  width: 150px;
  font-size: 22px;
  margin: 10px 0 0;
  color: #666;
}
.quan-amount {
  color: #F9355E;
  font-size: 24px;
  strong {
    font-size: 32px;
    margin-left: -12px;
    margin-right: 10px;
  }
}
.fff {
  margin: 20px;
}
.quan-desc {
  font-size: 26px;
  color: #bc9e71;
}
.tag-hint {
  margin: 10px;
  font-size: 22px;
  color: #aaa;
  text-align: center;
}
.tag3-hint {
  color: #aaa;
  font-size: 24px;
}
.tag3-content {
  flex: 1;
  margin: 10px;
  padding: 10px;
  border: 1px solid #bc9e71;
  border-radius: 10px;
  font-size: 24px;
  color: #d8b796;
}
.jljing, .jljing-num {
  color: #FD5746;
}
.icon-svip {
  width: 26px;
}
.kapian {
  width: 80%;
  padding: 25px 20px;
  margin: 10px;
  background-color: #fff2da;
  font-size: 26px;
  position: relative;
  &::after {
    content: '';
    position: absolute;
    height: 20px;
    width: 20px;
    top: -10px;
    left: 90px;
    background-color: #fff;
    transform: rotate(45deg);
  }
  &::before {
    content: '';
    position: absolute;
    height: 20px;
    width: 20px;
    bottom: -10px;
    left: 90px;
    background-color: #fff;
    transform: rotate(45deg);
  }
}
.jljing-num {
  margin-right: 60px;
  font-size: 44px;
}
.special-container {
    flex-wrap: wrap;
}
.special-content {
  width: 46%;
  margin: 10px;
  overflow: hidden;
}
.foods-name {
  font-size: 24px;
  color: #3f3f3f;
}
.foods-price {
  font-size: 36px;
}
.del-price {
  color: #aaa;
  margin-left: 10px;
}
.sub-price {
  font-size: 24px;
  margin-left: -10px;
}
.foods-img {
  width: 300px;
}
.icon-money {
  font-size: 24px;
}
.sub-huiyuan {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 5px 10px;
  background-color: #f07373;
  border-radius: 10px;
  color: #fff;
  font-size: 20px;
}
.kefu-content {
  height: 200px;
  background: url(https://cube.elemecdn.com/9/b8/c5f575ba0eb4ed2531c21c8f3ce0bpng.png?x-oss-process=image/quality,q_90/format,webp) no-repeat center center / 50% 100%;
}
.kefu-hint {
  font-size: 24px;
  color: #4c4c4c;
}
</style>
